<template>
  <div>
    <a-table
      sticky
       style="width:96%;height:100px;marinLeft:20px;"
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1380 ,y:400}"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'"><a>action</a></template>
      </template>
      <template #summary>
        <a-table-summary>
          <a-table-summary-row>
            <a-table-summary-cell :index="0" :col-span="2"
              >Fix Left</a-table-summary-cell
            >
            <a-table-summary-cell :index="2" :col-span="8"
              >Scroll Context</a-table-summary-cell
            >
            <a-table-summary-cell :index="10">Fix Right</a-table-summary-cell>
          </a-table-summary-row>
        </a-table-summary>
      </template>
    </a-table>
  </div>
  
</template>
<script>
import { defineComponent, ref } from "vue";
import ComOptionProps from '../ComOptionProps/index.vue';
import getCurrentTime from "../getCurrentTime/index.vue";
export default defineComponent({
  setup() {
    const columns = ref([
      {
        title: "状态",
        width: 100,
        dataIndex: "name",
        key: "name",
        fixed: "left",
      },
      {
        title: "称呼",
        width: 100,
        dataIndex: "age",
        key: "age",
        fixed: "left",
      },
      {
        title: "联系方式",
        dataIndex: "address",
        key: "1",
        width: 150,
      },
      {
        title: "原始内容",
        dataIndex: "content",
        key: "2",
        width: 150,
      },
      {
        title: "HTML 内容",
        dataIndex: "htmlContext",
        key: "3",
        width: 150,
      },
      {
        title: "管理文章",
        dataIndex: "Management",
        key: "4",
        width: 150,
      },
      {
        title: "创建时间",
        dataIndex: "createSetData",
        key: "5",
        width: 150,
      },
      {
        title: "父级评论",
        dataIndex: "ComponentPropsNull",
        key: "6",
        width: 150,
      },
      {
        title: "操作",
        dataIndex:"ComponentPropsOption",
        key: "operation",
        fixed: "right",
        width: 100,
      },
    ]);
    const data = [];

    for (let i = 0; i < 100; i++) {
      data.push({
        key: i,
        name: `通过 `,
        age: "Set",
        address: `1010@qq.com`,
        content: "查看内容",
        htmlContext: "查看内容",
        Management: "文章",
        createSetData: <getCurrentTime></getCurrentTime>,
        ComponentPropsNull: "无",
        ComponentPropsOption:<ComOptionProps></ComOptionProps>

      });
    }

    return {
      data,
      columns,
    };
  },
  components: {
    getCurrentTime,
    ComOptionProps
  },
});
</script>

<style>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}
[data-theme="dark"] #components-table-demo-summary tfoot th,
[data-theme="dark"] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
</style>